import React from 'react';
import { Box, Tooltip, useTheme } from '@mui/material';

interface MemoryStatusIndicatorProps {
    currentTurns: number;
    maxTurns: number;
}

/**
 * 记忆状态灯型指示器组件
 */
export const MemoryStatusIndicator: React.FC<MemoryStatusIndicatorProps> = ({ currentTurns, maxTurns }) => {
    const theme = useTheme();

    // 计算当前使用百分比
    const usagePercent = (currentTurns / maxTurns) * 100;

    // 根据百分比确定状态颜色
    let statusColor;
    let statusText;

    if (usagePercent < 50) {
        // 绿色 - 良好状态
        statusColor = theme.palette.success.main;
        statusText = "记忆状态良好";
    } else if (usagePercent < 80) {
        // 黄色 - 警告状态
        statusColor = theme.palette.warning.main;
        statusText = "记忆接近上限";
    } else {
        // 红色 - 危险状态
        statusColor = theme.palette.error.main;
        statusText = "记忆即将满载";
    }

    return (
        <Tooltip title={`${statusText}：已使用 ${currentTurns}/${maxTurns} 轮对话 (${Math.round(usagePercent)}%)`}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, ml: 1.5 }}>
                <Box
                    sx={{
                        width: 10,
                        height: 10,
                        borderRadius: '50%',
                        backgroundColor: statusColor,
                        boxShadow: `0 0 4px ${statusColor}`,
                        animation: usagePercent >= 80 ? 'pulse 2s infinite' : 'none',
                        '@keyframes pulse': {
                            '0%': { boxShadow: `0 0 4px ${statusColor}` },
                            '50%': { boxShadow: `0 0 8px ${statusColor}` },
                            '100%': { boxShadow: `0 0 4px ${statusColor}` }
                        }
                    }}
                />
            </Box>
        </Tooltip>
    );
}; 